<template>
  <div class="userseach">
    <vol-box :lazy="true" :model.sync="model.box1" title="查看" :height="500" :width="900"
      :padding="15">
      <el-row>
        <el-col :span="12">
          <el-card class="box-card" style="margin: 8px;  height:200px;">
            <el-form label-width="120px">
              <div style="width:100px;height:100px;margin:0 auto;" v-if="userform.head_img">
                <img :src="userform.head_img" :onerror="errorImg" class="imgDiv" alt="头像" />
              </div>
              <div class="userName">{{ userform.nickname }}</div>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" style="margin: 8px;  height:200px;">
            <el-form label-width="100px" class="selectForm">
              <el-form-item label="分销商状态:">
                {{ getStatus(userform.status) }}
              </el-form-item>
              <el-form-item label="分销等级:">
                {{this.userformChildren.share_lever_sort}}
              </el-form-item>
              <el-form-item label="上级分销商:">
                {{userform.parentname}}
              </el-form-item>
              <el-form-item label="提现方式:">
                <span v-if="typeShow">{{ userform.withdraw_deposit_type == 1? '按月':'实时' }}</span>
                <el-select v-else v-model="userform.withdraw_deposit_type" style="width: 100px;">
                  <el-option label="按月" :value="1"></el-option>
                  <el-option label="实时" :value="2"></el-option>
                </el-select>
                <a @click="chadeposit">{{txsf}}</a>
              </el-form-item>
              <!-- <div class="borderNo">
                <el-form-item label="佣金比例:">
                  <div style="float: right; margin-right: 150px">
                    <span v-for="o in 3" :key="o" style="margin-left: 8px; margin-right: 8px">
                      {{ o + "级" }}
                    </span>
                  </div>
                </el-form-item>
              </div>
              <div class="borderNo">
                <el-form-item label="">
                  <div style="float: right; margin-right: 110px">
                    <span
                      style="margin-left: 8px; margin-right: 9px;padding-left:10px;padding-right:30px;">
                      {{
                        userformChildren.commission_rate_1st == null
                          ? 0+"%"
                          : userformChildren.commission_rate_1st+"%"
                      }}
                      <span style="margin-left: 8px; padding-right:8px;padding-left:5px;">
                        {{
                          userformChildren.commission_rate_2nd == null
                            ? 0 +"%"
                            : userformChildren.commission_rate_2nd +"%"
                        }}
                      </span>
                      <span style="margin-left: 8px; margin-right: 9px;">
                        {{
                          userformChildren.commission_rate_3rd == null
                            ?0+"%"
                            : userformChildren.commission_rate_3rd +"%"
                        }}
                      </span>
                    </span>
                  </div>
                </el-form-item>
              </div> -->
              <!-- <div class="borderNo">
                <el-form-item label="允许升级:">
                  <el-switch v-model="userform.upgrade" @change="changeValueupgrade($event)">
                  </el-switch>
                </el-form-item>
              </div> -->
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card" style="margin-left: 8px; margin-right: 8px; margin-bottom: 8px">
            <div>
              <span>团队统计</span>
              <span style="padding-left: 20px;color:#2d8cf0;" @click="ViewTeam()">查看团队</span>
            </div>
            <div class="teamList">
              <div class="sc">
                <div>团队人数:</div>
                <div>{{
                    GetMyteam.totalteam == undefined
                      ? 0
                      : GetMyteam.totalteam
                  }}</div>
              </div>
              <div class="sc">
                <div>一级团队人数:</div>
                <div>{{
                    GetMyteam.firstlevelmember == undefined
                      ? 0
                      : GetMyteam.firstlevelmember
                  }}</div>
              </div>
              <!-- <div class="sc">
                <div>二级团队人数:</div>
                <div>{{
                    GetMyteam.secondlevelmember == undefined
                      ? 0
                      : GetMyteam.secondlevelmember
                  }}</div>
              </div> -->
            </div>
            <!-- <div class="teamList">
              <div class="sc">
                <div>团队分销商人数:</div>
                <div>{{
                    GetMyteam.totaltamedistributors == undefined
                      ? 0
                      : GetMyteam.totaltamedistributors
                  }}</div>
              </div>
              <div class="sc">
                <div>一级分销商人数:</div>
                <div>{{
                    GetMyteam.firstleveldistributor == undefined
                      ? 0
                      : GetMyteam.firstleveldistributor
                  }}</div>
              </div>
              <div class="sc">
                <div>二级分销商人数:</div>
                <div>{{
                    GetMyteam.secondleveldistributor == undefined
                      ? 0
                      : GetMyteam.secondleveldistributor
                  }}</div>
              </div>
            </div> -->

            <!-- <div>
              <div class="teamList">
                <div class="pq">
                  <div>团队分销总金额:</div>
                  <div>{{
                    GetMyteam.totaltamePrice == undefined
                      ? 0
                      : GetMyteam.totaltamePrice
                  }}</div>
                </div>
                <div class="pq">
                  <div>一级分销总金额:</div>
                  <div>{{
                    GetMyteam.firstleveltamePrice == undefined
                      ? 0
                      : GetMyteam.firstleveltamePrice
                  }}</div>
                </div>
                <div class="pq">
                  <div>二级分销总金额:</div>
                  <div>{{
                    GetMyteam.secondleveltamePrice == undefined
                      ? 0
                      : GetMyteam.secondleveltamePrice
                  }}</div>
                </div>
                <div class="pq">
                  <div>直推分销总金额:</div>
                  <div>{{
                    GetMyteam.DirectdistributionPrice == undefined
                      ? 0
                      : GetMyteam.DirectdistributionPrice
                  }}</div>
                </div>
              </div>
            </div> -->
            <div class="teamList">
              <div class="pq">
                <div>团队分销总订单:</div>
                <div>{{
                    GetMyteam.totaltameOrder == undefined
                      ? 0
                      : GetMyteam.totaltameOrder
                  }}</div>
              </div>
              <div class="pq">
                <div>一级分销总订单:</div>
                <div>{{
                    GetMyteam.firstleveltameOrder == undefined
                      ? 0
                      : GetMyteam.firstleveltameOrder
                  }}</div>
              </div>
              <!-- <div class="pq">
                  <div>二级分销总订单:</div>
                  <div>{{
                    GetMyteam.secondleveltameOrder == undefined
                      ? 0
                      : GetMyteam.secondleveltameOrder
                  }}</div>
                </div>
                 <div class="pq">
                <div>直推分销总订单:</div>
                <div>{{
                    GetMyteam.DirectdistributionOrder == undefined
                      ? 0
                      : GetMyteam.DirectdistributionOrder
                  }}</div>
              </div> -->
            </div>
            <div>
              <div class="teamList">
                <div class="pq">
                  <div>累计佣金:</div>
                  <div>{{
                    GetMyteam.commissionPrice == undefined
                      ? 0
                      : GetMyteam.commissionPrice
                  }}</div>
                </div>
                <div class="pq">
                  <div>待入账佣金:</div>
                  <div>{{
                    GetMyteam.preparecommissionPrice == undefined
                      ? 0
                      : GetMyteam.preparecommissionPrice
                  }}</div>
                </div>
                <div class="pq">
                  <div>消费金额:</div>
                  <div>{{
                    GetMyteam.consumptionPrice == undefined
                      ? 0
                      : GetMyteam.consumptionPrice
                  }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card" style="margin-left: 8px; margin-right: 8px; margin-bottom: 8px">
            <div>
              <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
                <el-radio-button label="top">分销动态</el-radio-button>
                <el-radio-button label="right">分销订单</el-radio-button>
                <el-radio-button label="bottom">佣金明细</el-radio-button>
              </el-radio-group>
              <vol-table v-if="tabPosition == 'top'" ref="goodlisttable"
                :columns="distributionDynamics" :height="300" :tableData="VSmallOrdersData"
                :ck="false"></vol-table>
              <vol-table v-if="tabPosition == 'right'" ref="goodlisttable"
                :columns="DistributionOrder" :height="300" :tableData="DistributionOrderData"
                :ck="false">
              </vol-table>
              <vol-table v-if="tabPosition == 'bottom'" ref="goodlisttable"
                :columns="CommissionDetails" :height="300" :tableData="CommissionDetailsData"
                :ck="false"></vol-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </vol-box>
    <vol-box :lazy="true" :model.sync="model.box3" title="查看团队" :height="400" :width="800"
      :padding="15">
      <vol-table ref="ViewTeamable" :columns="columnsTeam" :height="400" :tableData="ViewTeamData"
        :ck="false"></vol-table>
    </vol-box>
  </div>
</template>

<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
// import VolUpload from "@/components/basic/VolUpload.vue";
import VolTable from "@/components/basic/VolTable.vue";

export default {
  components: {
    VolForm,
    VolBox,
    VolTable,
  },
  data() {
    return {
      typeShow: true,
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      // 显示等级名称
      sharelevelList: [],
      // 编辑完善信息的判断
      personalInformationp: 0,
      // 按钮的显示
      personalInforBotton: 0,
      overAllPhone: "",
      overAllId: "",
      VSmallOrdersData: [],
      DistributionOrderData: [],
      CommissionDetailsData: [],
      model: { box1: false, box3: false },
      tabPosition: "top",
      userform: {
        head_img: "",
        distributionState: "",
        distributionLevel: "",
        allowUpgrade: "",
        superiorDistributor: "",
        // superiorDistributorList: [],
        commissionRate: "",
        nickname: "",
        // 分销商状态
        status: "",
        // 允许升级
        upgrade: "",
        // 资料状态
        resourcestatus: "",
        // 累计佣金
        commission: "",
        // 消费金额
        consumption: "",
        //待入账佣金
      },
      GetMyteam: {},
      userformChildren: {
        share_lever_sort: "",
        commission_rate_1st: "",
        commission_rate_2nd: "",
        commission_rate_3rd: "",
      },
      ck: true,
      columns: [
        {
          field: "external_online_order_number",
          title: "外部线上订单号",
          type: "string",
          width: 160,
          align: "left",
        },
        {
          field: "external_offline_order_number",
          title: "外部线下订单号",
          type: "string",
          width: 160,
          align: "left",
        },
        {
          field: "auxiliaryConfirmationNo",
          title: "辅助确认号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "confirmationNo",
          title: "确认号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "pay_type",
          title: "支付方式",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "playStartDate",
          title: "游玩开始时间",
          type: "datetime",
          edit: { type: "text" },
          width: 120,
          align: "left",
          sortable: true,
        },
        {
          field: "playEndDate",
          title: "游玩结束时间",
          type: "datetime",
          edit: { type: "text" },
          width: 120,
          align: "left",
          sortable: true,
        },
        {
          field: "settlement_total_fee",
          title: "结算总价",
          type: "decimal",
          edit: { type: "text" },
          width: 120,
          align: "left",
        },

        {
          field: "settlement_price",
          title: "结算单价",
          type: "decimal",
          width: 120,
          align: "left",
        },
        {
          field: "paydepositPrice",
          title: "押金",
          type: "decimal",
          width: 120,
          align: "left",
        },
        {
          field: "childrenNumber",
          title: "订单子项单号",
          type: "string",
          width: 120,
          align: "left",
        },
      ],
      // 分销动态 distributionDynamics
      distributionDynamics: [
        {
          field: "logContent",
          title: "动态内容",
          type: "string",
          width: 180,
          align: "left",
        },
        {
          field: "phone",
          title: "分销员电话",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "createDate",
          title: "动态时间",
          type: "datetime",
          width: 180,
          align: "left",
        },
      ],
      //分销订单 DistributionOrder
      DistributionOrder: [
        {
          field: "order_number",
          title: "订单号",
          type: "string",
          width: 180,
          align: "left",
        },
        {
          field: "name",
          title: "下单用户信息",
          type: "string",
          width: 160,
          align: "left",
        },
        {
          field: "commissionStatus",
          title: "分佣状态",
          type: "select",
          width: 120,
          align: "left",
          bind: {
            key: "",
            data: [],
          },
        },
        {
          field: "settlement_total_fee",
          title: "商品结算金额",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "commissionPrice",
          title: "分佣金额/到账金额",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "commissionTime",
          title: "加入时间",
          type: "datetime",
          width: 180,
          align: "left",
        },
      ],
      // Commission Details佣金明细
      CommissionDetails: [
        {
          field: "order_number",
          title: "订单号",
          type: "string",
          width: 180,
          align: "left",
        },
        {
          field: "name",
          title: "下单用户信息",
          type: "string",
          width: 160,
          align: "left",
        },
        {
          field: "commissionStatus",
          title: "入账状态",
          type: "select",
          width: 120,
          align: "left",
          bind: {
            key: "",
            data: [],
          },
        },
        {
          field: "commissionPrice",
          title: "分佣金额",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "commissionTime",
          title: "加入时间",
          type: "datetime",
          width: 180,
          align: "left",
        },
      ],
      statusList: [
        {
          key: 0,
          value: "审核中",
        },
        {
          key: 1,
          value: "正常",
        },
        {
          key: 2,
          value: "驳回",
        },
        {
          key: 3,
          value: "禁用",
        },
        {
          key: 4,
          value: "冻结",
        },
      ],
      columnsTeam: [
        {
          field: "name",
          title: "用户名称",
          type: "string",
          width: 160,
          align: "left",
        },
        {
          field: "grade",
          title: "等级",
          type: "select",
          width: 100,
          align: "left",
          bind: {
            key: "",
            data: [],
          },
        },
        {
          field: "phone",
          title: "手机号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "createDate",
          title: "加入时间",
          type: "string",
          width: 180,
          align: "left",
        },
      ],
      ViewTeamData: [],
      txsf: "修改",
    };
  },
  created() {
    this.onGetVueDictionary();
  },
  methods: {
    chadeposit() {
      this.typeShow = !this.typeShow;
      this.txsf = this.typeShow == true ? "修改" : "保存";
      if (this.typeShow) {
        let apr = {
          // delKeys: null,
          // detailData: null,
          mainData: {
            // ...this.userform,
            id: this.overAllId,
            withdraw_deposit_type: this.userform.withdraw_deposit_type == false ? 0 : 1,
          },
        };
        this.http
          .post("api/Small_user_distributors/UserUpdate", apr)
          .then((res) => {
            if (res.status) {
              this.$Message.success(res.message);
              this.$store.getters.data().viewPageTest.refresh();
            }
          });
      }
    },
    getStatus(v) {
      return this.statusList.filter((i) => i.key == v)[0].value;
    },

    changeValueupgrade(val) {
      console.log(val, "val---upgrade");
      let formData = {
        mainData: {
          id: this.overAllId,
          phone: this.overAllPhone,
          upgrade: val == false ? 0 : 1,
        },
      };
      this.http
        .post("/api/Small_user_distributors/UserUpdate", formData)
        .then((res) => {
          if (res.status) {
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message);
          }
        });
    },

    onGetVueDictionary() {
      let param = ["sharelevel", "commission_settlement"];
      this.http.post("/api/Dictionary/GetVueDictionary", param).then((res) => {
        res.forEach((o) => {
          if (o.dicNo == "sharelevel") {
            o.data.forEach((i) => {
              let obj = {
                label: i.value,
                value: i.key,
              };
              this.sharelevelList.push(obj);
            });
            this.columnsTeam[1].bind.data = o.data;
          } else if (o.dicNo == "commission_settlement") {
            this.DistributionOrder[2].bind.data = o.data;
            this.CommissionDetails[2].bind.data = o.data;
          }
        });
      });
    },
    open(row) {
      // console.log(row, "row")
      this.model.box1 = true;
      this.overAllPhone = row.phone;
      this.overAllId = row.id;
      let params = {
        order: "desc",
        page: 1,
        rows: 30,
        sort: "id",
        wheres: `[{\"name\":\"id\",\"value\":\"${this.overAllId}\",\"displayType\":\"text\"}]`,
      };
      let param = {
        order: "desc",
        page: 1,
        rows: 30,
        sort: "id",
        wheres: `[{\"name\":\"share_lever_sort\",\"value\":\"${row.grade}\",\"displayType\":\"text\"}]`,
      };
      //分销动态
      let paramdistributionDynamics = {
        page: 1,
        rows: 30,
        wheres: `[{\"name\":\"phone\",\"value\":\"${row.phone}\",\"displayType\":\"like\"}]`,
      };
      let extensionPhone = {
        page: 1,
        rows: 999999,
        wheres: `[{\"name\":\"extensionPhone\",\"value\":\"${row.phone}\",\"displayType\":\"like\"}]`,
      };
      let subservantPone = {
        page: 1,
        rows: 999999,
        wheres: `[{\"name\":\"subservantPone\",\"value\":\"${row.phone}\",\"displayType\":\"like\"}]`,
      };
      let GetMyteam = {
        phone: this.overAllPhone,
        distributors: row.distributorCode,
      };
      this.http
        .post("/api/Small_user_distributors/GetMyteam", GetMyteam)
        .then((res) => {
          if (res.code == 200) {
          }
          this.GetMyteam = res.data;
        });
      this.$nextTick(() => {
        this.http
          .post("/api/Small_user_distributors/getPageData", params)
          .then((res) => {
            // console.log(res, "res---Small_user_distributors");
            // console.log(JSON.parse(res.rows[0].formcontent), "formcontent----");
            this.userform = res.rows[0];
            this.userform.status = res.rows[0].status.toString();
            this.userform.upgrade = res.rows[0].upgrade == 0 ? false : true;
            //   // .toString()
            // console.log(res.rows[0], "res.rows[0].share_lever_sort")
            this.userform.resourcestatus =
              res.rows[0].resourcestatus == null
                ? "3"
                : res.rows[0].resourcestatus.toString();
          });
        this.http.post("/api/ShareLevel/getPageData", param).then((res) => {
          if (res.rows.length > 0) {
            this.userformChildren = res.rows[0];
            let share_lever_sort = res.rows[0].share_lever_sort;
            if (res.rows[0].share_lever_sort != "") {
              this.sharelevelList.forEach((res) => {
                if (res.value == share_lever_sort) {
                  this.userformChildren.share_lever_sort = res.label;
                }
              });
            }
          }
        });
      });
      this.http
        .post(
          "/api/mall_distributor_log/GetPageMydynamic",
          paramdistributionDynamics
        )
        .then((res) => {
          if (res.rows != null) {
            this.VSmallOrdersData = res.rows;
          }
        });
      this.http
        .post("/api/small_order_distributors/getPageData", extensionPhone)
        .then((res) => {
          if (res.rows != null) {
            this.DistributionOrderData = res.rows;
          }
        });
      this.http
        .post("/api/small_order_distributors/getPageData", subservantPone)
        .then((res) => {
          if (res.rows != null) {
            this.CommissionDetailsData = res.rows;
          }
        });
    },
    //查看团队
    ViewTeam() {
      this.model.box3 = true;
      console.log(this.userform.phone);
      let pamr = {
        order: "desc",
        page: 1,
        rows: 9999,
        sort: "",
        wheres: `[{"name":"phone","value":"${this.userform.phone}","displayType":"text"},{"name":"distributorCode","value":"${this.userform.distributorCode}","displayType":"text"}]`,
      };
      this.http
        .post("/api/Small_user_distributors/GetPageDataTeam", pamr)
        .then((res) => {
          if (res.rows != null) {
            this.ViewTeamData = res.rows[0].childList;
            res.rows[0].childList.forEach((i) => {
              i.grade = i.grade.toString();
            });
            console.log(this.ViewTeamData);
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.selectForm {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
.teamList {
  margin-top: 20px;
  display: flex;
  .sc {
    width: 30%;
    div {
      margin-bottom: 10px;
    }
  }
  .pq {
    width: 30%;
    div {
      margin-bottom: 10px;
    }
  }
}
.userseach {
  color: #666;
  background-color: #f1f4f6;
  font-size: 13px;
  padding: 10px;
  font-family: Noto Sans SC;
  font-weight: 400;
  height: "900";
  width: "800";
}
.userName {
  padding-top: 10px;
  text-align: center;
  font-family: Noto Sans SC;
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 14px;
  color: #626066;
}

// .borderNo .el-form-item >>> .el-input__inner {
//   border: none;
//   width: 130px;
//   padding-left: 0px;
// }
.borderNo .el-input {
  width: 130px;
}
.borderNo .el-form-item {
  margin-left: 80px;
}
// .borderTwo .el-form-item >>> .el-input__inner {
//   border: none;
//   width: 160px;
//   padding-left: 0px;
// }

.box-card {
  overflow-y: auto; /* 开启滚动显示溢出内容 */
}
.imgDiv {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ccc;
}
</style>
